<template>
  <div>
    <!-- 订单页 -->
    <div class="order-nav">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="first"></el-tab-pane>
        <el-tab-pane label="待付款" name="second"></el-tab-pane>
        <el-tab-pane label="待发货" name="third"></el-tab-pane>
        <el-tab-pane label="待收货" name="cm"></el-tab-pane>
        <el-tab-pane label="待评价" name="fourth"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="order-list">
      <el-table
        style="width: 100%"
        :data="datalist"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="title" label="宝贝" width="180">
        </el-table-column>
        <el-table-column prop="price" label="单价" width="80">
        </el-table-column>
        <el-table-column prop="saleCount" label="数量" width="48">
        </el-table-column>
        <el-table-column label="支付状态" width="88">
          <template slot-scope="scope">
            <span>{{ scope.row.payed == 1 ? "已支付" : "未支付" }} </span>
          </template>
        </el-table-column>
        <el-table-column label="发货状态" width="88">
          <template slot-scope="scope">
            <span>{{ scope.row.delivery == 1 ? "已发货" : "未发货" }} </span>
          </template>
        </el-table-column>
        <el-table-column label="实付款">
          <template slot-scope="scope">
            <span
              >{{
                scope.row.saleCount * parseInt(scope.row.price.slice(1))
              }}
              元</span
            >
          </template>
        </el-table-column>
        <el-table-column label="交易状态">
          <template slot-scope="scope">
            <span>{{ scope.row.received == 1 ? "已收货" : "未收货" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deal" label="交易操作" width="250px" class="ccc">
          <template slot-scope="scope">
            <el-button
              @click="qrsh(scope.row)"
              v-if="zhuan == 0"
              size="mini"
              type="success"
              :disabled="
                scope.row.received == 1
                  ? true
                  : false || scope.row.payed == 0
                  ? true
                  : false
              "
              >确认收货</el-button
            >
            <el-button
              :disabled="scope.row.payed == 1 ? false : true"
              v-if="zhuan == 0"
              size="mini"
              type="danger"
              @click="sqtk(scope.row.id)"
              >申请退款</el-button
            >

            <el-button
              v-if="zhuan == 1"
              size="mini"
              type="danger"
              @click="qzf(scope.row)"
              >去支付</el-button
            >
            <el-button
              v-if="zhuan == 2"
              size="mini"
              type="danger"
              @click="cfh(scope.row)"
              >催发货</el-button
            >

            <el-button
              v-if="zhuan == 3"
              size="mini"
              type="danger"
              @click="qrsh(scope.row)"
              >确认收货</el-button
            >
            <el-button
              v-if="zhuan == 4"
              size="mini"
              type="primary"
              @click="zcgm(scope.row.pid)"
              >再次购买</el-button
            >
            <el-button
              v-if="zhuan == 4"
              size="mini"
              type="danger"
              @click="pj(scope.row)"
              >去评价</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      datalist: [],
      zanlist: [],
      zhuan: 0,
    };
  },
  methods: {
    zcgm(pid) {
      this.$router.replace(`/product/details/${pid}`);
    },
    pj(value) {
      this.$prompt("输入您的好评", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "谢谢您的评价!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    qzf(value) {
      // console.log(value);
      let {
        uid,
        pid,
        count,
        logistics,
        odd,
        delivery,
        checked,
        id,
        payed,
        received,
        birth_date,
        saleCount,
        price,
      } = value;
      // console.log(id);
      // console.log(saleCount);
      // console.log(price);
      let zf = saleCount * parseInt(price.slice(1));
      this.$confirm(`本次会扣除${zf} 元, 是否确认?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$http.orderApi
            .payment({
              uid,
              pid,
              count,
              logistics,
              odd,
              delivery,
              checked,
              id,
              payed: 1,
              received,
              birth_date,
            })
            .then((res) => {
              // console.log(res.data.res.payed);
              console.log(res);

              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "支付成功!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    cfh(value) {
      value.delivery = 1;
      this.$http.orderApi.update(value).then((res) => {
        if (res.data.code === 200) {
          this.$message("已经催促商家发货!");
          this.datalist.find((item) => {
            if (item.id == value.id) {
              item.delivery = 1;
              return true;
            }
          });
          this.datalist = JSON.parse(JSON.stringify(this.datalist));
        } else {
          this.$message("操作失败");
        }
      });
    },
    qrsh(value) {
      console.log(value);
      value.received = 1;
      this.$http.orderApi.update(value).then((res) => {
        console.log(res);
      });
    },

    sqtk(id) {
      console.log(id);

      this.$prompt("请输入退款原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "正在申请中",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleClick(tab, event) {
      // console.log(tab.index, event);
      this.zhuan = tab.index;
      if (tab.index == 0) {
        this.cc();
      }
      // payed 是否付款 1是付款
      if (tab.index == 1) {
        this.datalist = this.zanlist.filter((i) => i.payed == 0);
      }
      //delivery 是否发货 1 发货
      if (tab.index == 2) {
        this.datalist = this.zanlist.filter(
          (i) => i.delivery == 0 && i.payed == 1
        );
      }
      // 已经支付 已经发货 交易状态未收货received 0 未收货
      if (tab.index == 3) {
        this.datalist = this.zanlist.filter(
          (i) => i.payed == 1 && i.delivery == 1 && i.received == 0
        );
      }
      // 已经支付 已经收货
      if (tab.index == 4) {
        this.datalist = this.zanlist.filter(
          (i) => i.payed == 1 && i.delivery == 1
        );
      }
      console.log(this.zhuan);
    },

    cc() {
      let params = JSON.parse(sessionStorage.getItem("user"));
      // console.log("用户", { uid: params.uid });
      this.$http.orderApi.queryByUid({ uid: params.uid }).then((res) => {
        console.log("订单", res.data.res);

        this.zanlist = res.data.res;
        this.datalist = this.zanlist;
      });
    },
  },
  mounted() {
    this.cc();
  },
};
</script>

<style lang="scss" scoped>
.order-nav {
  margin: 10px;
}
.order-list {
  margin: 0 10px;
  overflow: scroll;
  height: 700px;
}
</style>
